

<template>
  <div style="flex-direction: column; height: 100vh; display: flex;">

    <div style="height: 38px; opacity: 0.5;"></div>
    
    <router-view 
    @saveTypePaySelect="(type: any) => {typePaySelect = type}"
    @saveRangePay="(type: any) => {rangePay = type}"
    @saveBasePay="(type: number) => {basePay = type}"
    @saveCameraId="(type: number) => {cameraId = type}"

    :getCacheFile="getCacheFile" 
    :saveCacheFile="saveCacheFile" 
    :typePaySelect="typePaySelect" 
    :rangePay="rangePay" 
    :basePay="basePay" 
    :cameraId="cameraId">

    </router-view>


    <v-layout class="overflow-visible" style="height: 56px;">
      <v-bottom-navigation
        v-model="value"
        color="teal"
        grow
      >
        <v-btn>
          <v-icon>mdi-deskphone</v-icon>
          周薪
        </v-btn>

        <v-btn>
          <v-icon>mdi-code-brackets</v-icon>
          扫码
        </v-btn>

      </v-bottom-navigation>
    </v-layout>
  </div>



</template>

<script lang="ts" setup>
  import { ref, watch, onMounted } from 'vue'
  import { useRouter, useRoute } from "vue-router";
  import { writeTextFile, readTextFile, create, exists, BaseDirectory } from '@tauri-apps/plugin-fs';
  const router = useRouter();
  const route = useRoute();
  const value = ref(0)
  const cacheFileName = "cache.json";
  //薪资类型
  const typePaySelect = ref({
    code :"f_3_s",
    title : "非优速（大于3周）"
  });
  const rangePay = ref({
    "f_1_2_15_x": [
      {"id":1, "formDt": 0, "toDt": 23, "price": 0, "equal": "formDt"},
      {"id":1, "formDt": 23, "toDt": 25, "price": 0.5, "equal": "formDt"},
      {"id":1, "formDt": 25, "toDt": 27, "price": 0.8, "equal": "formDt"},
      {"id":1, "formDt": 27, "toDt": 29, "price": 1.2, "equal": "formDt"},
      {"id":1, "formDt": 29, "toDt": 31, "price": 1.6, "equal": "formDt"},
      {"id":1, "formDt": 31, "toDt": 33, "price": 2, "equal": "formDt"},
      {"id":1, "formDt": 33, "toDt": 35, "price": 3, "equal": "formDt"},
      {"id":1, "formDt": 35, "toDt": 37, "price": 4, "equal": "formDt"},
      {"id":1, "formDt": 37, "toDt": 39, "price": 5, "equal": "formDt"},
      {"id":1, "formDt": 39, "toDt": 41, "price": 6, "equal": "formDt"},
      {"id":1, "formDt": 41, "toDt": 43, "price": 7, "equal": "formDt"},
      {"id":1, "formDt": 43, "toDt": 1000, "price": 8, "equal": "formDt"}
    ],
    "f_1_2_15_s": [
      {"id":1, "formDt": 0, "toDt": 23, "price": 0, "equal": "formDt"},
      {"id":1, "formDt": 23, "toDt": 25, "price": 1, "equal": "formDt"},
      {"id":1, "formDt": 25, "toDt": 27, "price": 1.5, "equal": "formDt"},
      {"id":1, "formDt": 27, "toDt": 29, "price": 2, "equal": "formDt"},
      {"id":1, "formDt": 29, "toDt": 31, "price": 3, "equal": "formDt"},
      {"id":1, "formDt": 31, "toDt": 33, "price": 4, "equal": "formDt"},
      {"id":1, "formDt": 33, "toDt": 35, "price": 5, "equal": "formDt"},
      {"id":1, "formDt": 35, "toDt": 37, "price": 6, "equal": "formDt"},
      {"id":1, "formDt": 37, "toDt": 39, "price": 7, "equal": "formDt"},
      {"id":1, "formDt": 39, "toDt": 41, "price": 8, "equal": "formDt"},
      {"id":1, "formDt": 41, "toDt": 43, "price": 9, "equal": "formDt"},
      {"id":1, "formDt": 43, "toDt": 1000, "price": 10, "equal": "formDt"}
    ],
    "f_3_x": [
      {"id":1, "formDt": 0, "toDt": 28, "price": 0, "equal": "formDt"},
      {"id":1, "formDt": 28, "toDt": 30, "price": 0.5, "equal": "formDt"},
      {"id":1, "formDt": 30, "toDt": 32, "price": 0.8, "equal": "formDt"},
      {"id":1, "formDt": 32, "toDt": 34, "price": 1.3, "equal": "formDt"},
      {"id":1, "formDt": 34, "toDt": 36, "price": 1.7, "equal": "formDt"},
      {"id":1, "formDt": 36, "toDt": 38, "price": 2.5, "equal": "formDt"},
      {"id":1, "formDt": 38, "toDt": 40, "price": 3, "equal": "formDt"},
      {"id":1, "formDt": 40, "toDt": 42, "price": 4, "equal": "formDt"},
      {"id":1, "formDt": 42, "toDt": 44, "price": 5, "equal": "formDt"},
      {"id":1, "formDt": 44, "toDt": 46, "price": 6, "equal": "formDt"},
      {"id":1, "formDt": 46, "toDt": 48, "price": 7, "equal": "formDt"},
      {"id":1, "formDt": 48, "toDt": 1000, "price": 8, "equal": "formDt"}
    ],
    "f_3_s": [
      {"id":1, "formDt": 0, "toDt": 32, "price": 0, "equal": "formDt"},
      {"id":1, "formDt": 32, "toDt": 34, "price": 0.5, "equal": "formDt"},
      {"id":1, "formDt": 34, "toDt": 36, "price": 0.8, "equal": "formDt"},
      {"id":1, "formDt": 36, "toDt": 38, "price": 1.3, "equal": "formDt"},
      {"id":1, "formDt": 38, "toDt": 40, "price": 1.7, "equal": "formDt"},
      {"id":1, "formDt": 40, "toDt": 42, "price": 2.5, "equal": "formDt"},
      {"id":1, "formDt": 42, "toDt": 44, "price": 3, "equal": "formDt"},
      {"id":1, "formDt": 44, "toDt": 46, "price": 4, "equal": "formDt"},
      {"id":1, "formDt": 46, "toDt": 48, "price": 5, "equal": "formDt"},
      {"id":1, "formDt": 48, "toDt": 50, "price": 6, "equal": "formDt"},
      {"id":1, "formDt": 50, "toDt": 52, "price": 7, "equal": "formDt"},
      {"id":1, "formDt": 52, "toDt": 1000, "price": 8, "equal": "formDt"}
    ],
    "q": [
      {"id":1, "formDt": 0, "toDt": 32, "price": 0, "equal": "formDt"},
      {"id":1, "formDt": 32, "toDt": 34, "price": 0.5, "equal": "formDt"},
      {"id":1, "formDt": 34, "toDt": 36, "price": 1, "equal": "formDt"},
      {"id":1, "formDt": 36, "toDt": 38, "price": 1.5, "equal": "formDt"},
      {"id":1, "formDt": 38, "toDt": 40, "price": 2, "equal": "formDt"},
      {"id":1, "formDt": 40, "toDt": 42, "price": 3, "equal": "formDt"},
      {"id":1, "formDt": 42, "toDt": 44, "price": 4, "equal": "formDt"},
      {"id":1, "formDt": 44, "toDt": 46, "price": 5, "equal": "formDt"},
      {"id":1, "formDt": 46, "toDt": 48, "price": 6, "equal": "formDt"},
      {"id":1, "formDt": 48, "toDt": 50, "price": 7, "equal": "formDt"},
      {"id":1, "formDt": 50, "toDt": 52, "price": 8, "equal": "formDt"},
      {"id":1, "formDt": 52, "toDt": 54, "price": 9, "equal": "formDt"},
      {"id":1, "formDt": 54, "toDt": 1000, "price": 10, "equal": "formDt"}
    ]
  });
  const basePay = ref(18.7);
  const cameraId = ref(0);

  // When the component is mounted, sync the `value` based on the current route
  onMounted(async () => {
    if (route.path === "/") {
      value.value = 0;
    } else if (route.path === "/qr") {
      value.value = 1;
    }
    //获取换成设置
    let data = await getCacheFile(cacheFileName)
    if (data) {
        // 转成json字符串并格式化
        let json: any = JSON.parse(data);
        console.log(json)
        typePaySelect.value = json.typePaySelect;
        rangePay.value = json.rangePay;
        basePay.value = json.basePay;
        if (isNumber(json.cameraId)) {
          cameraId.value = parseInt(json.cameraId)
        }
        
    }
  });

  function isNumber(str: string) {
  return /^-?\d+(\.\d+)?$/.test(str);
}

  watch(typePaySelect, (_1, _2) => {
    saveCacheFile(cacheFileName, JSON.stringify({typePaySelect: typePaySelect.value, rangePay: rangePay.value, basePay: basePay.value, cameraId: cameraId.value}))
  }, { deep: true })

  
  watch(cameraId, (_1, _2) => {
    saveCacheFile(cacheFileName, JSON.stringify({typePaySelect: typePaySelect.value, rangePay: rangePay.value, basePay: basePay.value, cameraId: cameraId.value}))
  }, { deep: true })

  // Watch for route changes and update `value`
  watch(route, (newRoute) => {
    if (newRoute.path === "/") {
      value.value = 0;
    } else if (newRoute.path === "/qr") {
      value.value = 1;
    }
  });

  // Handle bottom navigation changes
  watch(value, async (_1, _2) => {
    switch (value.value) {
      case 0:
        router.push({ path: "/" });
        break;
      case 1:
        router.push({ path: "/qr" });
        break;
      default:
        router.push({ path: "/" });
    }
  });

  const getCacheFile = async (cacheFileName: string | URL) : Promise<string> => {
  console.log("获取文件")
      //判断默认文件是否存在
    const exit = await exists(cacheFileName, { baseDir: BaseDirectory.AppData });
    if (!exit) {
    await create(cacheFileName, { baseDir: BaseDirectory.AppData })
    }
    let data = await readTextFile(cacheFileName, { baseDir: BaseDirectory.AppData })
    if (data) {
        // 转成json字符串并格式化
        return data;
    }
    return "";
}


const saveCacheFile = async (cacheFileName: string | URL, data: string) => {
  console.log("更新设置！！")
  console.log(data)
  await writeTextFile(cacheFileName, data, { baseDir: BaseDirectory.AppData }) 
}

</script>

<style>
html,
body,
#app {
    height: 100%;
    margin: 0;
    padding: 0;
    scrollbar-width: none;
}



/* 滚动条宽度 */
::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}
</style>